'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    PixelRatio,
    Text,
    View,
	Image,
	TouchableWithoutFeedback
} from 'react-native';
import Swiper from 'react-native-swiper';

import css from '../../../common/common_css.js'
import dp from '../../../common/pxToDp.js'
class HomeSwiper extends Component{
    constructor(props) {
      	super(props);
      	this.state = {

      	};
		//屏蔽黄色警告
		// console.disableYellowBox = true
    }
	//页面渲染前执行
	componentWillMount(){

	}

	//焦点图跳转页面
	focusClick(id){
		alert(`跳转到id为${id}的页面`);
	}
    render(){
		var focusImg=[];
		var json=this.props.data;
		json.forEach((item,index)=>{
			focusImg.push(
				<TouchableWithoutFeedback
					onPress={this.focusClick.bind(this,item.id)}
					key={index}
				>
					<Image
						style={[s.height230]}
						source={{uri:item.uri}}
					></Image>
				</TouchableWithoutFeedback>
			)
		})

		return(
			<Swiper
				loop={true}
				height={223}
				paginationStyle={[s.bottom3]}
				dotStyle={[s.dot]}
				activeDotStyle={[s.activeDot]}
				autoplay={true}
				>
				{focusImg}	
			</Swiper>
		)
    }
}

const s = StyleSheet.create(Object.assign(css,{
	body:{
		backgroundColor:'#fff'
	},
	dot:{
		width:dp(20),
		height:dp(2),
		borderRadius:0
	},
	activeDot:{
		width:dp(20),
		height:dp(2),
		backgroundColor:'#fff',
		borderRadius:0
	}
}));

module.exports=HomeSwiper;
